<template>
  <layout title="tips信息框">
    <layout-content title="基础使用">
      <options-list icon="menu" @click="openDefaultTips">弹出Tips</options-list>
    </layout-content>

    <layout-content title="修改弹出位置">
      <options-list icon="menu" @click="openCenterTips">居中Tips</options-list>
      <options-list icon="menu" @click="openBottomTips">底部Tips</options-list>
    </layout-content>

    <layout-content title="修改消息类型">
      <options-list icon="menu" @click="openPrimaryTips">Primary消息</options-list>
      <options-list icon="menu" icon-color="#00D886" @click="openSuccessTips">Success消息</options-list>
      <options-list icon="menu" icon-color="#FBBD12" @click="openWarningTips">Warning消息</options-list>
      <options-list icon="menu" icon-color="#FF444F" @click="openDangerTips">Danger消息</options-list>
      <options-list icon="menu" icon-color="#9C9C9C" @click="openInfoTips">Info消息</options-list>
    </layout-content>
  </layout>

  <tn-tips ref="defaultTips" :top="customNavbar.height + 'px'"></tn-tips>
  <tn-tips ref="centerTips" :top="customNavbar.height + 'px'" position="center"></tn-tips>
  <tn-tips ref="bottomTips" :top="customNavbar.height + 'px'" position="bottom"></tn-tips>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import OptionsList from '@/components/components-option-list/index.vue'

import useSystemInfo from '@/tuniao-ui/libs/hooks/useSystemInfo'

import TnTips from '@/tuniao-ui/components/tn-tips/src/Tips.vue'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

const { customNavbar } = useSystemInfo()

// 默认Tips
const defaultTips = ref<InstanceType<typeof TnTips>>()
const openDefaultTips = () => {
  defaultTips.value?.show({
    msg: '打开成功'
  })
}
// 修改消息类型
const openPrimaryTips = () => {
  defaultTips.value?.show({
    type: 'primary',
    msg: 'Primary类型消息'
  })
}
const openSuccessTips = () => {
  defaultTips.value?.show({
    type: 'success',
    msg: 'Success类型消息'
  })
}
const openWarningTips = () => {
  defaultTips.value?.show({
    type: 'warning',
    msg: 'Warning类型消息'
  })
}
const openDangerTips = () => {
  defaultTips.value?.show({
    type: 'danger',
    msg: 'Danger类型消息'
  })
}
const openInfoTips = () => {
  defaultTips.value?.show({
    type: 'info',
    msg: 'Info类型消息'
  })
}

// 居中Tips
const centerTips = ref<InstanceType<typeof TnTips>>()
const openCenterTips = () => {
  centerTips.value?.show({
    msg: '打开成功'
  })
}
// 底部Tips
const bottomTips = ref<InstanceType<typeof TnTips>>()
const openBottomTips = () => {
  bottomTips.value?.show({
    msg: '打开成功'
  })
}
</script>

<style lang="scss" scoped>
</style>
